<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <button @click="test">点我</button>

    <!--事件修饰符
        .stop     作用: 用来阻止事件冒泡  用来阻止事件继续向外传递，（事件传递就是子标签的事件会传递给祖宗标签元素）
        .prevent  作用: 用来阻止标签的默认行为
        .self     作用: 只监听自身标签触发的事件
        .once     作用: 该事件只触发一次

        语法:      @事件名事件修饰符="事件处理函数"======> @click.stop="test"
    -->

    <h3>stop修饰符</h3>
    <div style="width: 200px;height: 200px;background: red" @click="parent">

        <!--会触发外层标签的事件方法-->
<!--        <div style="width: 100px;height: 100px;background: aquamarine" @click="child">-->
<!--        </div>-->

        <!--不会触发外层标签的事件方法-->
        <div style="width: 100px;height: 100px;background: aquamarine" @click.stop="child">
        </div>

    </div>


    <h3>prevent修饰符</h3>
    <!--先触发事件，然后跳转到超链接页面-->
    <a href="http://www.baidu.com" @click="testa">点我</a>

    <!--只会触发时间，原有的超链接页面跳转失效-->
    <a href="http://www.baidu.com" @click.prevent="testa">点我</a>

    <!--javascript:;表示没有任何超链接-->
    <a href="javascript:;" @click.prevent="testa">点我</a>

    <h3>self修饰符(事件修饰符可以连用)</h3>
    <div style="width: 200px;height: 200px;background: red" @click.self="parent">

        <!--@click.self.stop表示不会触发外层元素的单击事件，而且只会触发自己的单击事件（相当于屏蔽了下层元素的单击事件传递）-->
        <div style="width: 100px;height: 100px;background: aquamarine" @click.self.stop="child">

            <div style="width: 50px;height: 50px;background:royalblue" @click="child1">

            </div>

        </div>

    </div>

    <h3>once修饰符</h3>
    <!--点击多次，每次都会触发事件-->
    <button @click="test">点我我是按钮,我的单击支触发一次</button>

    <!--只有第一次调用才会触发事件，相当于幂等-->
    <button @click.once="test">点我我是按钮,我的单击支触发一次</button>

</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"事件修饰符"
        },
        methods:{
            test(){
                console.log("test");
            },
            parent(){
                console.log("parent");
            },
            child(){
                console.log("child");
            },
            child1(){
                console.log("child1");
            },
            testa(){
                console.log("testa");
            }
        },
        computed:{},//用来在vue实例中定义一些列计算属性    {{属性名}}
    })
</script>

